<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>备忘录</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>备忘录</h1>
<!-- 双向绑定输入内容 ， 且回车添加li项 -->
<input placeholder="请输入任务" autofocus="autofocus"
autocomplete="off" class="new-todo" />
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<!-- 循环展示所有的li项 -->
<li class="todo">
<div class="view">
<!-- 显示索引+1为序号 -->
<span class="index">1.</span>
<!-- 显示项的内容 -->
<label>完成唱跳Rap</label>
<!-- 移除当前项 -->
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count">
<!-- 统计总计数 -->
<strong>1</strong> items left
</span>
<!-- 清除所有项 -->
<button class="clear-completed">
Clear
</button>
</footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
},
methods: {
},
})
</script>
</html>